import CopyButton from '@/components/CopyButton';
import { useSearchAreaConfig } from '@/components/SearchArea';
import { ElButton, ElTag } from 'element-plus';
import { sexList, statusList } from '../constant';
import { useTableColumns } from '@/components/ProTable';

interface IDataItem {
  id: string;
  username: string;
  nickname: string;
  gender: number;
  status: number;
  mobile: string;
  email: string;
  roleIds: string;
  avatar: string;
  createdTime: string;
  trackState?: boolean;
}

export const useSearchTableConfig = ({ handleSearch, handleEdit }: any) => {
  // 搜索表单配置
  const { searchAreaConfig } = useSearchAreaConfig(() => {
    return [
      {
        label: '名称',
        prop: 'username',
        component: 'input',
        placeholder: '请输入名称',
      },
      {
        label: '昵称',
        prop: 'nickname',
        component: 'input',
        placeholder: '请输入昵称',
      },
      {
        label: '性别',
        prop: 'gender',
        component: 'select',
        placeholder: '请选择性别',
        options: [
          { value: '1', label: '男' },
          { value: '2', label: '女' },
        ],
      },
      {
        label: '状态',
        prop: 'status',
        component: 'select',
        placeholder: '请选择状态',
        options: [
          { value: '1', label: '启用' },
          { value: '0', label: '禁用' },
        ],
      },
      {
        label: '电话',
        prop: 'mobile',
        component: 'input',
        placeholder: '请输入电话',
      },
      {
        label: '邮箱',
        prop: 'email',
        component: 'input',
        placeholder: '请输入邮箱',
      },
      {
        label: '创建时间',
        prop: ['createdStartTime', 'createdEndTime'],
        component: 'datePicker',
        type: 'daterange',
        disabledDate: (time: Date) => time > new Date(),
      },
    ];
  });

  // 表格配置
  const { columns } = useTableColumns<IDataItem>(() => {
    return [
      {
        type: 'selection',
        isHidden: false,
        fixed: 'left',
        align: 'center',
      },
      {
        type: 'index',
        label: '序号',
        width: 80,
        isHidden: true,
      },
      {
        label: '名称',
        prop: 'username',
        width: 100,
        isHidden: false,
        render: (row) => {
          return true ? (
            <router-link
              to={{
                name: 'TemplateAppEdit',
                params: { id: row.id },
              }}
            >
              <ElButton text type="primary">
                {row.username}
              </ElButton>
            </router-link>
          ) : (
            <span>{row.username}</span>
          );
        },
      },
      {
        label: '昵称',
        prop: 'nickname',
        width: 120,
      },
      {
        label: '性别',
        prop: 'gender',
        width: 80,
        type: 'enum',
        options: sexList,
        mode: 'tag',
      },
      {
        label: '状态',
        prop: 'status',
        width: 100,
        type: 'enum',
        options: statusList,
        dot: true,
      },
      {
        label: '电话',
        prop: 'mobile',
        width: 130,
        render: (row) => {
          return (
            <span class="flex-y-center">
              <span>{row.mobile}</span>
              <CopyButton text={row.mobile} />
            </span>
          );
        },
      },
      {
        label: '邮箱',
        prop: 'email',
        width: 150,
      },
      {
        label: '角色',
        prop: 'roleIds',
        width: 120,
        render: (row) => {
          return row.roleIds.includes('1') ? (
            <ElTag effect="plain">超级管理员</ElTag>
          ) : (
            <ElTag effect="plain" type="success">
              开发
            </ElTag>
          );
        },
      },
      {
        label: '头像',
        prop: 'avatar',
        type: 'image',
        width: 120,
      },
      {
        label: '创建时间',
        prop: 'createdTime',
        type: 'date',
        format: 'YYYY-MM-DD HH:mm:ss',
        showOverflowTooltip: true,
        minWidth: 150,
      },
      {
        label: '操作',
        fixed: 'right',
        width: 240,
        render: (row) => {
          const isCanEdit = true;
          const isCanDelete = true;
          const handleDelete = async (row: IDataItem) => {
            await ElMessageBox.confirm(`是否删除该用户[${row.username}]？`, '删除', { type: 'warning' });
            ElMessage.success('操作成功');
            handleSearch?.();
          };
          return (
            <>
              {isCanEdit ? (
                <ElButton type="success" link icon="edit" onClick={() => handleEdit(row)}>
                  编辑
                </ElButton>
              ) : null}
              {isCanDelete ? (
                <ElButton type="danger" link icon="delete" onClick={() => handleDelete(row)}>
                  删除
                </ElButton>
              ) : null}
              {true ? (
                <router-link
                  class="ml-10px mr-10px"
                  to={{
                    name: 'TemplateAppDetail',
                    params: { id: row.id },
                  }}
                >
                  <ElButton type="primary" link icon="view">
                    查看
                  </ElButton>
                </router-link>
              ) : null}
            </>
          );
        },
      },
    ];
  });

  return { searchAreaConfig, columns };
};
